/*
 * @Author: xiaosihan
 * @Date: 2021-04-28 23:12:52
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-11-07 19:24:56
 */

import React from "react";
import * as THREE from "three";
import Mesh from "../Mesh/Mesh";
import Object3D from "../Object3D/Object3D";
import Object3DComponent, { Object3DComponentProps } from "../Object3D/Object3DComponent";
import { Object3DEvent } from "../Renderer/type";
import Transition from "../xrt_util/Transition";
import TransitionColor from "../xrt_util/TransitionColor";

const ball = new THREE.SphereBufferGeometry(0.5, 10, 10);

export interface AmbientLightProps extends Object3DComponentProps {
    color?: string; //灯光颜色
    intensity?: number; // 灯光强度
}

interface State { }

export default class AmbientLight extends Object3DComponent<AmbientLightProps, State> {
    constructor(props: AmbientLightProps) {
        super(props);

        this.object3d.add(this.ambientLight);
    }

    ambientLight = new THREE.AmbientLight() as unknown as THREE.AmbientLight & Object3D;

    // 颜色缓动对象
    Tcolor = new TransitionColor(this.props.color || "#fff");

    // 灯光参数
    lightParams = new Transition();

    componentBeforeRender(renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera) {
        let keepRun = this.setLightParam();
        return keepRun;
    }


    componentDidMount() {
        this.setLightTansParam();
        this.setLightParam();
        this.object3d.addEventListener(Object3DEvent.BEFORE_RENDER, this.setLightParam);
    }

    componentDidUpdate() {
        this.setLightTansParam();
        this.object3d.removeEventListener(Object3DEvent.BEFORE_RENDER, this.setLightParam);
        this.object3d.addEventListener(Object3DEvent.BEFORE_RENDER, this.setLightParam);
    }

    componentWillUnmount() {
        this.object3d.removeEventListener(Object3DEvent.BEFORE_RENDER, this.setLightParam);
    }

    // 设置环境光的过渡参数
    setLightTansParam() {
        const { bezier, duration = 500, color = "#fff", intensity = 1 } = this.props;

        this.Tcolor.setBezier(bezier).setDuration(duration).set(color);

        this.lightParams.setBezier(bezier).setDuration(duration).set({ intensity });
    }

    // 设置环境光的参数
    setLightParam = () => {
        let keepRun = false;

        // 光照颜色
        if (!this.Tcolor.isDone()) {
            const { r, g, b } = this.Tcolor.getJson();
            this.ambientLight.color.setRGB(r, g, b);
            keepRun = true;
        }

        // 光照强度
        if (!this.lightParams.isDone()) {
            const { intensity } = this.lightParams.getJson();
            Object.assign(this.ambientLight, {
                intensity
            })
            keepRun = true;
        }

        if (!keepRun) {
            this.object3d.removeEventListener(Object3DEvent.BEFORE_RENDER, this.setLightParam);
        }

    }

    render() {

        const { dev } = this.context;
        const { color = "#fff" } = this.props;

        if (!dev) {
            return null;
        }

        return (
            <>
                <Mesh
                    duration={0}
                    geometry={ball}
                    side={THREE.DoubleSide}
                    material="MeshBasicMaterial"
                    wireframe={true}
                    clipping={false}
                    color={color}
                    cursor="pointer"
                    title={
                        <div
                            style={{
                                position: "relative",
                                backgroundColor: "rgba(0, 0, 0, 0.8)",
                                borderRadius: 4,
                                padding: "4px 8px",
                                color: "#fff"
                            }}
                        >
                            <span>{"环境光"}<br /></span>
                            <span>{"<AmbientLight/>"}<br /></span>
                        </div>
                    }
                />
            </>
        );
    }
}